<template>
  <div class="app-container">
    <!--表单组件-->
    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title" width="500px">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
        <el-form-item label="字典名称" prop="dictName">
          <el-input v-model="form.dictName" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="内容描述" prop="dictDescribe">
          <el-input v-model="form.dictDescribe" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="字典类型" prop="dictType">
          <el-radio-group v-model="form.dictType" size="mini" style="width: 178px">
            <el-radio-button label="0">系统字典</el-radio-button>
            <el-radio-button label="1">业务字典</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="dictSort">
          <el-input-number v-model.number="form.dictSort" :min="0" :max="999" controls-position="right" style="width: 80px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>
    <!-- 字典列表 -->
        <el-card class="box-card">
          <!--工具栏-->
          <div class="head-container">
            <div v-if="crud.props.searchToggle">
              <!-- 搜索 -->
              <el-input v-model="query.dictName" clearable size="small" placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
              <rrOperation />
            </div>
            <crudOperation :permission="permission" />
          </div>
          <!--表格渲染-->
          <el-table ref="table" v-loading="crud.loading" highlight-current-row style="width: 100%;" :data="crud.data" @selection-change="crud.selectionChangeHandler" @current-change="handleCurrentChange">
            <el-table-column  type="selection" width="55" />
            <el-table-column :show-overflow-tooltip="true" prop="dictName" label="名称" />
            <el-table-column :show-overflow-tooltip="true" prop="dictDescribe" label="描述" />
            <el-table-column :show-overflow-tooltip="true" prop="dictType" label="类型" >
              <template slot-scope="scope">
                <span v-if="scope.row.dictType">业务字典</span>
                <span v-else>系统字典</span>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期" />
            <el-table-column v-permission="['admin','dict:edit','dict:del']" label="操作" width="220px" align="center" fixed="right">
              <template slot-scope="scope">
                <udOperation
                  style="display: inline-block"
                  :data="scope.row"
                  :permission="permission"
                />
                <el-button style="display: inline-block;" size="mini" type="primary" icon="el-icon-edit" @click="getDetails(scope.row)">字典项</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--分页组件-->
          <pagination />
        </el-card>
      <!-- 字典详情列表 -->
    <el-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="showDetail" title="字典项" width="1000px" :destroy-on-close="true">
      <el-button
        v-permission="permission.add"
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="showDetailModel"
        style="margin-bottom: 20px"
      >
        新增
      </el-button>
      <el-table :data="dictDetailsList">
        <el-table-column property="dictName" label="字典内容"/>
        <el-table-column property="dictType" label="字典类型">
          <template slot-scope="scope">
            <span v-if="scope.row.dictType">业务字典</span>
            <span v-else>系统字典</span>
          </template>
        </el-table-column>
        <el-table-column property="dictDescribe" label="具体描述"/>
        <el-table-column property="dictValue" label="字典值"/>
        <el-table-column property="createTime" label="创建时间"/>
        <el-table-column v-permission="['admin','dict:edit','dict:del']" label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button v-permission="permission.edit" size="mini" type="primary" icon="el-icon-edit" @click="editDetail(scope.row)" />
<!--            <Poptip style="margin-left: 10px" @on-ok="delDetail(scope.row)"  confirm title="确认删除?">-->
<!--              <el-button-->
<!--                type="danger"-->
<!--                size="mini"-->
<!--                icon="el-icon-delete"-->
<!--              />-->
<!--            </Poptip>-->
            <el-button v-permission="permission.edit" size="mini" type="danger" icon="el-icon-delete" @click="delDetail(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
<!--  字典详情修改也-->
    <el-dialog :append-to-body="true" :close-on-click-modal="false"  :visible.sync="showEditDetail" title="编辑字典项" width="500px" :destroy-on-close="true">
      <el-form ref="detailModel" :model="detailModel" :rules="rules" size="small" label-width="80px">
        <el-form-item label="字典名称" prop="dictName">
          <el-input v-model="detailModel.dictName" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="内容描述" prop="dictDescribe">
          <el-input v-model="detailModel.dictDescribe" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="字典参数" prop="dictValue">
          <el-input v-model="detailModel.dictValue" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="字典类型" prop="dictType">
          <el-radio-group v-model="detailModel.dictType" size="mini" style="width: 178px">
            <el-radio-button label="0">系统字典</el-radio-button>
            <el-radio-button label="1">业务字典</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="dictSort">
          <el-input-number v-model.number="detailModel.dictSort" :min="0" :max="999" controls-position="right" style="width: 80px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="modelClear">取消</el-button>
        <el-button type="primary" @click="addDetails">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import dictDetail from './dictDetail'
import crudDict from '@/api/system/dict'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import rrOperation from '@crud/RR.operation'
import udOperation from '@crud/UD.operation'
import {getDetails,saveDetails,editDetails,delRevo} from '@/api/system/dict'
import appUtils from '@/utils/appUtils'

const defaultForm = {
  id:0,
  dictName:null,
  dictDescribe:null,
  dictType: 0,
  dictSort:null
}

export default {
  name: 'Dict',
  components: { crudOperation, pagination, rrOperation, udOperation, dictDetail },
  cruds() {
    return [
      CRUD({ title: '字典', url: 'admin/dict/page', crudMethod: { ...crudDict }})
    ]
  },
  mixins: [presenter(), header(), form(defaultForm),crud()],
  data() {
    return {
      showEditDetail:false,
      detailModel:{
        id:0,
        dictId:null,
        dictName:null,
        dictDescribe:null,
        dictValue:null,
        dictType:0,
        dictSort:null
      },
      msg: {
        type: String,
        default: '确定删除本条数据吗？'
      },
      queryTypeOptions: [
        { key: 'name', display_name: '字典名称' },
        { key: 'description', display_name: '描述' }
      ],
      rules: {
        dictName: [
          { required: true, message: '请输入字典名称', trigger: 'blur' }
        ],
        dictDescribe: [
          { required: true, message: '请输入具体描述', trigger: 'blur' }
        ]
      },
      permission: {
        add: ['admin', 'sys_dict_add'],
        edit: ['admin', 'sys_dict_edit'],
        del: ['admin', 'sys_dict_del']
      },
      showDetail:false,
      dictDetailsList:[]
    }
  },
  methods: {
    checkPermission,
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      if (this.$refs.dictDetail) {
        this.$refs.dictDetail.query.dictName = ''
      }
      return true
    },
  //  查看字典详细
    getDetails(row){
      this.showDetail=true
      this.detailModel.dictId=row.id
      getDetails(JSON.stringify(row)).then(res=>{
        this.dictDetailsList=res.data
      }).catch(err=>{
      })
    },
  //  添加字典详情
    addDetails(){
      if (this.detailModel.dictDescribe==null || this.detailModel.dictDescribe===''){``
        appUtils.showError("请输入字典内容描述")
        return false;
      }
      if (this.detailModel.dictValue==null || this.detailModel.dictValue==='' || isNaN(this.detailModel.dictValue)){
        appUtils.showError("字典参数不能为字符")
        return false;
      }
      if (this.detailModel.dictName==null || this.detailModel.dictName===''){
        appUtils.showError("请输入字典名称")
        return false;
      }
      if (this.detailModel.id===0){
        saveDetails(JSON.stringify(this.detailModel)).then(res=>{
          if (res.state){
            this.showEditDetail=false
            this.showDetail=false
            appUtils.showSuccess("添加成功")
          }
          else {
            appUtils.showError("添加失败")
            return false
          }
        }).catch(err=>{
        })
      }
      else {
        editDetails(JSON.stringify(this.detailModel)).then(res=>{
          if (res.state){
            this.showEditDetail=false
            this.showDetail=false
            appUtils.showSuccess("编辑成功")
          }
          else {
            appUtils.showError("编辑失败")
            return false
          }
        }).catch(err=>{

        })
      }
    },
  //  编辑字典详情
    editDetail(row){
      this.detailModel.dictName=row.dictName
      this.detailModel.dictValue=row.dictValue
      this.detailModel.dictDescribe=row.dictDescribe
      this.detailModel.dictSort=row.dictSort
      this.detailModel.dictType=row.dictType
      this.detailModel.id=row.id
      this.showEditDetail=true
    },
  //  删除字典详情
    delDetail(row){
      row.dictId=this.detailModel.dictId
      delRevo(JSON.stringify(row)).then(res=>{
        if (res.state){
          this.showDetail=false
          appUtils.showSuccess("删除成功")
        }
        else{
          appUtils.showError(res.msg)
        }
      })
    },
  //  添加
    showDetailModel(){
      this.detailModel.dictDescribe=null
      this.detailModel.dictName=null
      this.detailModel.dictValue=null
      this.showEditDetail=true
    },
  //  取消弹窗
    modelClear(){
      this.showEditDetail=false
    },
  //  全选
    handleCurrentChange(val){
    }
  }
}
</script>

<style scoped>
</style>
